<script setup>
import {ref} from "vue";
import {message} from "ant-design-vue";
import axios from "axios";
import {useRouter} from 'vue-router'

const cityGroups = ref([]);
const provinces = ref([]);  //省份
const cities = ref([])  //城市
const selectedProvince = ref();
const selectedCity = ref();
const router = useRouter();
// 获取所有地址，包括省份和城市
const getArea = async () => {
  try {
    const response = await axios.get(`${window.link}/location/province`);
    if (response.data.code === 200) {
      cityGroups.value = response.data.data;
      provinces.value = cityGroups.value.map((province) => province.provinceName);
    } else {
      message.error(response.data.message);
    }
  } catch (error) {
    console.error("获取全部省份错误", error)
  }
}

const setCities = () => {
  cityGroups.value.map((province) => {
    if (province.provinceName === selectedProvince.value) {
      cities.value = province.cities;
    }
  })
}

const selectCity = () => {
  // 通过在 cities 数组中查找对应的城市对象来获取城市名称
  const selectedCityObj = cities.value.find(city => city.id === selectedCity.value);
  sessionStorage.setItem("cityId", selectedCity.value);
  sessionStorage.setItem("cityName", selectedCityObj.name);
  changeToHome();
}

const buttonCity = (id,name)=>{
  sessionStorage.setItem("cityId",id);
  sessionStorage.setItem("cityName",name)
  changeToHome()
}

const changeToHome = () => {
  router.push("/home/home1");
}


getArea()
</script>
<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <header class="bg-white shadow">
      <div class="max-w-7xl mx-auto px-4">
        <div class="text-xl font-bold text-gray-800">城市导航</div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="max-w-7xl mx-auto px-4 py-8">
      <!-- 城市搜索 -->
      <div class="bg-white p-6 rounded-lg shadow-sm mb-8">
        <div class="flex gap-4 mb-6">
          <a-select
              v-model:value="selectedProvince"
              placeholder="省份"
              class="!rounded-button search-select"
              @update:value="setCities"
              :style="{ width: '200px' }"
          >
            <a-select-option v-for="province in provinces" :key="province" :value="province">
              {{ province }}
            </a-select-option>
          </a-select>
          <a-select
              v-model:value="selectedCity"
              placeholder="城市"
              class="!rounded-button search-select"
              @update:value="selectCity"
              :style="{ width: '200px' }"
          >
            <a-select-option v-for="city in cities" :key="city.id" :value="city.id">
              {{ city.name }}
            </a-select-option>
          </a-select>
        </div>
      </div>

      <!-- 字母索引城市列表 -->
      <div class="bg-white p-6 rounded-lg shadow-sm">
        <h2 class="text-lg font-bold mb-4">按省份选择</h2>

        <!-- 遍历每个省份 -->
        <div v-for="group in cityGroups" :key="group.provinceId" class="mb-6 border-b border-gray-300 pb-2">
          <!-- 省份名称 -->
          <div class="flex items-center gap-4 mb-4 ">
            <div class="w-15 h-8 text-orange-400 flex items-center justify-center font-bold">
              {{ group.provinceName }}
            </div>
          </div>

          <!-- 渲染城市 -->
          <div class="flex flex-wrap gap-4">
            <a-button
                v-for="city in group.cities"
                :key="city.id"
                type="text"
                class="!rounded-button hover:text-red-500"
                @click ="buttonCity(city.id,city.name)"
            >
              {{ city.name }}
            </a-button>
          </div>
        </div>

      </div>

    </main>
  </div>
</template>


<style scoped>
.search-select :deep(.ant-select-selector) {
  border-radius: 8px !important;
  height: 40px !important;
  padding: 4px 11px !important;
  display: flex;
  align-items: center;
}

.custom-search :deep(.ant-input) {
  height: 40px !important;
  border-radius: 8px 0 0 8px !important;
}

.custom-search :deep(.ant-input-search-button) {
  height: 40px !important;
  border-radius: 0 8px 8px 0 !important;
}

.custom-search :deep(.ant-input-search-button .anticon) {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
